<script setup lang="ts">
import { btns, onDown, idx, BtnType } from "./scripts/JBookMark";
import Tab from "./components/tab.vue";
import TabB from "./components/tabB.vue";
import TabC from "./components/tabC.vue";
</script>

<template>
    <div class="j-bookmark d-flex">
        <div class="left d-flex flex-column">
            <span class="btn" v-for="(item, idx_) in btns" :key="idx_" :class="item == idx ? 'Active' : ''" @click="() => onDown(item)">{{ item.name }}</span>
        </div>
        <div class="right">
            <Tab v-if="idx.val === BtnType.CoinPairs"></Tab>
            <TabB v-if="idx.val === BtnType.Address"></TabB>
            <TabC v-if="idx.val === BtnType.CleverMoney"></TabC>
        </div>
    </div>
</template>

<style lang="less" scoped>
.j-bookmark {
    position: relative;
    top: 27px;
    width: 496px;
    height: 354px;
    color: #eaecef;
    background-color: #1d2126;
    box-shadow: 0px 2px 4px 0px #000000;
    border-radius: 4px;
    overflow: hidden;

    .left {
        width: 87px;
        font-size: 14px;
        position: relative;
        border-right: 1px solid #343a41;
        // user-select: none;

        span {
            padding: 10px 20px;

            &::after {
                content: "";
                margin-top: 10px;
                display: block;
                width: 100%;
                border-bottom: 1px solid #343a41;
                position: absolute;
                left: 0;
            }
        }

        // background-color: yellowgreen;
    }

    .right {
        flex: 1;
        height: inherit;
        // background-color: royalblue;
        padding: 10px;
    }
}

.Active {
    background-color: yellowgreen;
    color: var(--main);
    background-color: #2b3139;
}

:deep(.bdy) {
    i {
        color: var(--main);
    }
}
</style>
